<template>
  <div class="main">
    <div class="topTitle">{{ props.title }}</div>
    <div class="form_content">
      <NScrollbar>
        <div class="content">
          <div class="progressHint" v-if="hint">
            <NIcon size="20" class="iconStyle">
              <ErrorRound />
            </NIcon>
            <div style="white-space: pre-wrap" v-html="hint"></div>
          </div>
          <div class="progress">
            <div style="display: flex; margin-right: 10rem">
              <NIcon :size="20" class="iconStyle">
                <ApprovalFilled />
              </NIcon>
              <span>审批流程</span>
            </div>
            <span style="font-size: 18rem; flex: 1" :style="{ color: !workFlowList ? 'red' : '#79bb92' }">
              {{ workFlowList ? workFlowList : '暂无配置流程，请联系管理员进行配置' }}
            </span>
          </div>

          <div class="content_cen">
            <NForm ref="formRef" require-mark-placement="left" label-placement="left" :rules="rules" :label-width="120"
              :model="formValue" style="width: 360rem" label-align="right">
              <NFormItem label="用章类别:" path="chapterCategoryCode">
                <NSelect :options="typeList" class="commonWidth" v-model:value="formValue.chapterCategoryCode"
                  placeholder="请选择用章类别" :on-update:value="handleChangeType" />
              </NFormItem>

              <NFormItem label="用章名称:" v-if="'A0508' === formValue.chapterCategoryCode">
                <div>合同章</div>
                <!-- <NInput class="commonWidth" :allow-input="stopNull" v-model:value="formValue.chapterCategoryName"
                  disabled /> -->
              </NFormItem>

              <NFormItem label="用章名称:" path="chapterCategoryNames" v-if="'A0507' === formValue.chapterCategoryCode">
                <NCheckboxGroup class="commonWidth" v-model:value="formValue.chapterCategoryNames"
                  :on-update:value="handleValue">
                  <NCheckbox value="法人章" label="法人章" />
                  <NCheckbox value="馆章" label="馆章" />
                  <NCheckbox value="馆党委章" label="馆党委章" />
                </NCheckboxGroup>
              </NFormItem>

              <!-- <NFormItem label="合同金额:" path="contractAmount" v-if="'A0508' === formValue.chapterCategoryCode">
                <NInput placeholder="请输入合同金额" class="commonWidth" v-model:value="formValue.contractAmount"
                  :allow-input="onlyFloatNumber">
                  <template #suffix>元</template>
</NInput>
</NFormItem> -->

              <!-- 合同章的表单项 -->
              <template v-if="formValue.chapterCategoryCode === 'A0508'">
                <NFormItem label="合同类型:" path="contract">
                  <NSelect :options="SealApplication_ContractTypeList" class="commonWidth"
                    v-model:value="formValue.contract" placeholder="请选择合同类型" />
                </NFormItem>
                <NFormItem label="合同名称:" path="docContractName">
                  <NInput placeholder="请输入合同名称" class="commonWidth" v-model:value="formValue.docContractName"></NInput>
                </NFormItem>
                <NFormItem label="相对方名称:" path="sideName">
                  <NInput placeholder="请输入相对方名称" class="commonWidth" v-model:value="formValue.sideName"></NInput>
                </NFormItem>
                <NFormItem label="份数:" path="chapterCategoryNum">
                  <NInput placeholder="请输入份数" class="commonWidth" v-model:value="formValue.chapterCategoryNum"
                    :allow-input="onlyIntNumber"></NInput>
                </NFormItem>
                <NFormItem label="合同履行开始日期:" path="startTime">
                  <DatePicker input-readonly placeholder="请选择合同履行开始日期" clearable class="commonWidth"
                    v-model:formatted-value="formValue.startTime" :is-date-disabled="disabledStartTime" />
                </NFormItem>
                <NFormItem label="合同履行结束日期:" path="endTime">
                  <DatePicker input-readonly placeholder="请选择合同履行结束日期" clearable class="commonWidth"
                    v-model:formatted-value="formValue.endTime" :is-date-disabled="disabledEndTime" />
                </NFormItem>
                <NFormItem label="是否涉及金额:" path="relatedMoney">
                  <NSelect :options="SealApplication_RelatedMoney" class="commonWidth"
                    v-model:value="formValue.relatedMoney" placeholder="请选择是否涉及金额" />
                </NFormItem>

                <!-- 涉及金额 -->
                <template v-if="formValue.relatedMoney === '1'">
                  <NFormItem label="收付款类型:" path="moneyType">
                    <NSelect :options="SealApplication_MoneyTypeOptions" class="commonWidth"
                      v-model:value="formValue.moneyType" placeholder="请选择收付款类型" @update-value="handleChangeMoneyType" />
                  </NFormItem>
                  <NFormItem label="关联流程:" path="primitiveId" v-if="formValue.moneyType == 2">
                    <NSelect :options="linkList" class="commonWidth" label-field="key" value-field="value" :render-option="renderOption"
                      v-model:value="formValue.primitiveId" placeholder="请选择业务" clearable multiple />
                  </NFormItem>
                  <NFormItem label="金额（元）:" path="contractAmount">
                    <NInput placeholder="请输入金额" class="commonWidth" v-model:value="formValue.contractAmount"></NInput>
                  </NFormItem>
                </template>

                <NFormItem label="主要内容:" path="useInfo">
                  <NInput :allow-input="stopNull" placeholder="请输入主要内容" v-model:value="formValue.useInfo"
                    class="commonWidth" type="textarea" style="height: 130rem" />
                </NFormItem>

              </template>

              <!-- 法人章的表单项 -->
              <template v-if="formValue.chapterCategoryCode === 'A0507'">
                <NFormItem label="份数(份):" path="chapterCategoryNum">
                  <NInput placeholder="请输入份数" class="commonWidth" v-model:value="formValue.chapterCategoryNum"
                    :allow-input="onlyIntNumber"></NInput>
                </NFormItem>
                <NFormItem label="文件名称:" path="docContractName">
                  <NInput placeholder="请输入文件名称" class="commonWidth" v-model:value="formValue.docContractName"></NInput>
                </NFormItem>
                <NFormItem label="用途:" path="useInfo">
                  <NInput :allow-input="stopNull" placeholder="请输入用途" v-model:value="formValue.useInfo"
                    class="commonWidth" type="textarea" style="height: 130rem" />
                </NFormItem>
              </template>
              <!-- <NFormItem label="对方单位:" path="oppositeUnit" v-if="'A0508' === formValue.chapterCategoryCode">
                <NInput :allow-input="stopNull" placeholder="请输入对方单位" class="commonWidth"
                  v-model:value="formValue.oppositeUnit" />
              </NFormItem>

              <NFormItem label="用章数量:" path="chapterCategoryNum">
                <NInput placeholder="请输入用章数量" class="commonWidth" v-model:value="formValue.chapterCategoryNum"
                  :allow-input="onlyIntNumber" />
              </NFormItem>

              <NFormItem label="合同/文件名称:" path="docContractName">
                <NInput :allow-input="stopNull" placeholder="请输入合同/文件名称" class="commonWidth"
                  v-model:value="formValue.docContractName" />
              </NFormItem>

              <NFormItem label="用途:" path="useInfo">
                <NInput :allow-input="stopNull" placeholder="请输入用途" v-model:value="formValue.useInfo"
                  class="commonWidth" type="textarea" style="height: 130rem" />
              </NFormItem> -->

              <NFormItem label="附件:" path="fileId">
                <VUploader v-if="!isEdit || (isEdit && needUpload)" :default-file-list="largeDefaultFileList" @update:file-list="handleUpdateLargeFileList" v-model:file-list="fileList" ref="childRef" />
              </NFormItem>

              <!-- <NFormItem label="附件:" path="fileId">
                <NUpload :on-change="handleChangeFile" :file-list="fileList">
                  <NButton type="primary" ghost>点此上传</NButton>
                </NUpload>
              </NFormItem> -->

            </NForm>
          </div>
        </div>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <div style="display: flex">
      <NSpace justify="start" style="flex: 0 0 42%">
        <NButton style="width: 78px; color: #5fb17f" ghost @click="goBack">
          <template #icon>
            <img :src="VBackImg" style="width: 25rem; height: 25rem" />
          </template>
          返回
        </NButton>
      </NSpace>

      <NSpace justify="center">
        <NButton type="primary" style="background-color: #5faab1" @click="confirm(1)" v-if="workFlowList">
          保存草稿
        </NButton>
        <NButton type="primary" @click="confirm(0)" v-if="workFlowList">
          提交申请
        </NButton>
      </NSpace>
    </div>
  </FixedAction>

  <NModal :auto-focus="false" v-model:show="modalVisible">
    <VDialogContent @close="modalVisible = false" @submit="againConfirm" title="保存提示" :loading="loading">
      <div style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem">
        {{ contentContent }}
      </div>
    </VDialogContent>
  </NModal>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted, nextTick, h, type VNode } from 'vue'
import {
  NSpace,
  NForm,
  NInput,
  NFormItem,
  NButton,
  NScrollbar,
  NSelect,
  useMessage,
  NModal,
  NCheckboxGroup,
  NCheckbox,
  NIcon,
  NUpload,
  NTooltip,
  type SelectOption,
  type FormInst
} from 'naive-ui'
import router from '@/router'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
// import { useRoute } from 'vue-router'
// import VUpload from '@/views/OA/Common/Upload.vue'
import type { FormRules, UploadFileInfo } from 'naive-ui'
import VBackImg from '@/assets/images/back.png'
import { ApprovalFilled } from '@vicons/material'
import { ErrorRound } from '@vicons/material'
// import VUploader from '@/components/VUploader/VUploader.vue'
import VUploader from '@/components/VUploaderV3/VUploader.vue'
import VUpload from '@/views/OA/Common/Upload.vue'
import { SealApplication_ContractTypeList, SealApplication_RelatedMoney, SealApplication_MoneyTypeOptions } from '@/enums/index'
import { amoutRegex } from '@/enums/regex'
import { subDays } from 'date-fns'
import type { CustomFile } from '@/components/VUploaderV3/types'

// const route = useRoute()
const tags = useTagStore().tags
const message = useMessage()
const childRef = ref<any>()
const props = defineProps({
  title: { type: String, default: () => '用章申请' },
  id: { type: [Number, String], default: () => null },
  flag: { type: [Number, String], default: () => null }
})

//只输入正整数
const onlyIntNumber = (value: string) => {
  return !value || /^\d+$/.test(value)
}

const onlyFloatNumber = (value: string) => {
  var regA = /^\d*\.{0,1}\d{0,2}$/
  return !value || regA.test(value)
}

//去除空格
const stopNull = (value: string) => {
  return !value.startsWith(' ') && !value.endsWith(' ')
}

const DEFAULT_CHAPTER_CATEGORY_CODE = 'A0507' // 默认 法人章、馆章、馆党委章
const numberRegex = /^[0-9]*[1-9][0-9]*$/
const fileList = ref<any[]>([])
// 附件
const handleChangeFile = async (e: any) => {
  const file = e.file
  const uploadFileList = e.fileList || []
  if (file.file) {
    const isExits = fileList.value.find((f: any) => {
      return f.id === file.id
    })
    if (isExits) {
      return false;
    }
    const result = await uploadFile(file.file)
    if (result) {
      const fileObj = {
        id: result.fileId,
        name: result.name,
        status: 'finished',
        url: result.url
      }
      fileList.value = (!fileList.value) ? [fileObj] : [...fileList.value, fileObj]
      formValue.fileId = fileList.value.map((it: any) => it.id).join(',')
    }
  } else {
    console.log("删除文件")
    const index = fileList.value.findIndex((it: any) => {
      return it.name === file.name && it.id === file.id
    })
    fileList.value.splice(index, 1)
  }
}
// 上传文件
const uploadFile = async (file: File) => {
  const fileData = new FormData()
  fileData.append('file', file as File)
  const [error, res] = await sendRequest({
    module: 'upload',
    api: 'uploadFile',
    override: {
      data: fileData
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error('上传失败')
  message.success('上传成功')
  return res.data
}
const handleFileUpload = async (e: any) => {
  const { file, onFinish, onError, onProgress } = e
  const fileData = new FormData()
  fileData.append('file', file.file as File)
  const [error, res] = await sendRequest({
    module: 'upload',
    api: 'uploadFile',
    override: {
      data: fileData,
      onUploadProgress(v: any) {
        onProgress({ percent: Math.ceil(v.progress) })
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error('上传失败'), onError()
  fileList.value.push({
    id: res.data.fileId,
    name: res.data.name,
    status: 'finished',
    url: res.data.url
  })
  formValue.fileId = fileList.value.map((it: any) => it.id).join(',')
  message.success('上传成功')
  onFinish()
}
const disabledStartTime = (ts: any) => {
  if (!formValue.endTime) return false
  return ts > new Date(subDays(new Date(formValue.endTime), 0))
}

const disabledEndTime = (ts: any) => {
  if (!formValue.startTime) return false
  return ts < new Date(subDays(new Date(formValue.startTime), 0))
}
const formValue = reactive<Record<string, any>>({
  draft: null, //草稿状态
  entityId: null, //流程实体id
  chapterCategoryCode: DEFAULT_CHAPTER_CATEGORY_CODE, //用章类别
  chapterCategoryName: '法人章/馆章/馆党委章', //用章名称
  chapterCategoryNames: ['馆章'],
  contract: null, // 合同类型
  sideName: null, // 相对方名称
  startTime: null, // 合同履行开始日期
  endTime: null, // 合同履行结束日期
  relatedMoney: null, // 是否涉及金额,
  primitiveId: null, // 关联采购需求id
  moneyType: null, // 收付款类型
  contractAmount: null, //合同金额
  oppositeUnit: null, //对方单位
  chapterCategoryNum: '1', // 份数
  docContractName: null, //文件/合同名称
  useInfo: null,
  fileId: null
})
const functionCode = ref<string>(DEFAULT_CHAPTER_CATEGORY_CODE)
const rules: FormRules = {
  contract: {
    required: true,
    message: '合同类型不能为空',
    trigger: ['change', 'blur']
  },
  sideName: {
    required: true,
    trigger: ['change', 'blur', 'input'],
    validator: (_: any, value: any) => {
      if (!value || value.length === 0) return new Error('相对方名称不能为空')
      if (value.length > 50) return new Error('相对方名称不得超过50字')
      return true
    }
  },
  startTime: {
    required: true,
    message: '合同履行开始日期不能为空',
    trigger: ['change', 'blur']
  },
  endTime: {
    required: true,
    message: '合同履行结束日期不能为空',
    trigger: ['change', 'blur']
  },
  relatedMoney: {
    required: true,
    message: '是否涉及金额不能为空',
    trigger: ['change', 'blur']
  },
  moneyType: {
    required: true,
    message: '收付款类型不能为空',
    trigger: ['change', 'blur']
  },
  chapterCategoryCode: {
    required: true,
    message: '用章类别不能为空',
    trigger: ['change', 'blur']
  },
  chapterCategoryNames: {
    type: 'array',
    required: true,
    message: '用章名称不能为空',
    trigger: 'change'
  },
  chapterCategoryNum: {
    required: true,
    trigger: ['input', 'blur'],
    validator: (_: any, value: any) => {
      if (!value) return new Error('份数不能为空')
      if (value > 99) return new Error('份数不得超过99')
      return true
    }
  },
  contractAmount: {
    required: true,
    trigger: ['input', 'blur'],
    validator: (_: any, value: any) => {
      if (value.length === 0 || [null, undefined].includes(value)) return new Error('合同金额不能为空')
      if (value > 99999999) return new Error('合同金额不得超过99999999')
      if (value < 0) return new Error('金额不能为负数')
      if (!amoutRegex.test(value)) return new Error('金额输入格式有误！')
      return true
    }
  },
  oppositeUnit: {
    required: true,
    trigger: ['input', 'blur'],
    validator: (_: any, value: any) => {
      if (!value) return new Error('请填写对方单位')
      if (value.length > 100) return new Error('对方单位不得超过100字')
      return true
    }
  },
  useInfo: {
    required: true,
    trigger: ['input', 'blur'],
    validator: (_: any, value: any) => {
      if (!value || value.length === 0) return new Error('请填写用途')
      if (value.length > 500) return new Error('用途不得超过500字')
      return true
    }
  },
  fileId: {
    required: true,
    trigger: ['input', 'blur', 'change'],
    message: '附件不能为空'
  },
  docContractName: {
    required: true,
    trigger: ['input', 'blur'],
    validator: (_: any, value: any) => {
      if (!value) return new Error(`请填写${formValue.chapterCategoryCode === 'A0507' ? '文件名称' : '合同名称'}`)
      if (value.length > 100) return new Error(`${formValue.chapterCategoryCode === 'A0507' ? '文件名称' : '合同名称'}不得超过100字`)
      return true
    }
  }
}

//用章类型
const typeList = [
  {
    value: 'A0508',
    label: '合同章'
  },
  {
    value: 'A0507',
    label: '法人章/馆章/馆党委章'
  }
]
const handleValue = (val: any) => {
  formValue.chapterCategoryNames = val
}
/** 用章类型改变 */
const handleChangeType = (val: any, info: any) => {
  formValue.chapterCategoryCode = val
  formValue.chapterCategoryName = info.label
  Object.keys(formValue).map((it: any) => {
    if (it == 'chapterCategoryCode' || it == 'chapterCategoryName') return
    formValue[it] = null
  })
  // largeFileList.value = []
  fileList.value = []
  childRef.value.clearFiles()
  formValue.chapterCategoryNum = '1'
  if (val === 'A0508') {
    formValue.contract = 'A6801' // 默认公开招标
    formValue.relatedMoney = '1' // 默认涉及金额
    formValue.chapterCategoryNames = ['合同章']
  } else {
    formValue.chapterCategoryNames = ['馆章']
  }
}

const linkList = ref([])
// render创建select
const renderOption = ({ node, option }: { node: VNode; option: SelectOption }) =>
  h(
    NTooltip,
    {
      placement: 'left'
    },
    {
      trigger: () => node,
      default: () => option.key
    }
  )
/** 选择收付款类型 */
const handleChangeMoneyType = async (val: any) => {
  if (val == 2) {
    const [error, res] = await sendRequest({
      module: 'seal',
      api: 'chapterDroplist'
    })
    if (error) return message.error(error.message)
    linkList.value = res.data
    console.log('linkList.value: ', linkList.value)
  }
}
watch([
  () => formValue.chapterCategoryCode, // 用章类型
  () => formValue.contract, // 合同类型
  () => formValue.relatedMoney, // 是否涉及金额
  () => formValue.contractAmount, // 合同金额
], () => {
  let code = null
  const { chapterCategoryCode, contract, relatedMoney } = formValue
  if (chapterCategoryCode === 'A0507') {
    code = 'A0507'
  } else {
    if (['A6801', 'A6802', 'A6803'].includes(contract)) {
      if (relatedMoney === '1') {
        code = 'A0560'
      } else {
        code = 'A0561'
      }
    } else {
      if (relatedMoney === '0') {
        code = 'A0562'
      } else {
        const num = Number(formValue.contractAmount)
        if (num <= 20000) {
          code = 'A0563'
        } else if (num > 20000 && num <= 100000) {
          code = 'A0564'
        } else if (num > 100000 && num <= 300000) {
          code = 'A0565'
        } else {
          code = 'A0566'
        }
      }
    }
  }
  if (code !== functionCode.value) {
    functionCode.value = code
    getWorkFlow()
  }
})

watch(
  () => formValue.moneyType, // 付款类型
  () => {
    if (formValue.moneyType == 2) handleChangeMoneyType(2)
  }
)

// 获取流程id
const hint = ref()
const workFlowList = ref(' ')
/** 获取工作审批流 */
const getWorkFlow = async () => {
  const [error, res] = await sendRequest({
    module: 'receiveOrDispatch',
    api: 'workFlow',
    override: {
      params: {
        functionCode: functionCode.value // 用章类型
      }
    }
  })
  if (error) return
  if (res.code !== 0) return
  formValue.entityId = res.data.entityId
  hint.value = res.data.remark
  workFlowList.value = res.data.workFlowList?.length
    ? res.data.workFlowList?.map((it: any) => it).join(' → ')
    : null
}
//获取详情
const getInfo = async () => {
  const [error, res] = await sendRequest({
    module: 'seal',
    api: 'sealApplicationItem',
    uri: {
      id: props.id as never
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  // fileList.value = res.data?.fileList
  if (res.data.fileList) {
    largeDefaultFileList.value = res.data.fileList.map((e: any) => {
      const file = new File([], e.name)
      // @ts-ignore
      file.id = e.id
      // @ts-ignore
      file.path = e.path
      // @ts-ignore
      file.remoteId = e.id
      // @ts-ignore
      file.file = file
      // @ts-ignore
      file.completed = true
      // @ts-ignore
      file.remote = true
      return file
    })
  }
  needUpload.value = true
  const { chapterCategoryCode } = res.data
  Object.keys(formValue).map((it: any) => {
    // @ts-ignore
    if (it === 'chapterCategoryCode') {
      formValue[it] = ['A0560', 'A0561', 'A0562', 'A0563', 'A0564', 'A0565', 'A0566'].includes(chapterCategoryCode) ? 'A0508' : res.data[it]
    } else {
      formValue[it] = res.data[it]
    }
  })
  functionCode.value = chapterCategoryCode
  if (formValue.primitiveId) formValue.primitiveId = formValue.primitiveId !== '-1' ? formValue.primitiveId.split(',') : null
  await getWorkFlow()
}

// 附件
// const fileList: any = ref([])
// const handleUploadList = (v: any) => {
//   formValue.fileId = v
//   formRef.value?.validate()
// }
// const fileList = ref<UploadFileInfo[]>([])
// const handleUpdateFileList = (e: UploadFileInfo[]) => {
//   fileList.value = e
//   // @ts-ignore
//   formValue.fileId = fileList.value ? fileList.value.map((e) => e.file?.remoteId).join(',') : null
//   formRef.value?.validate()
// }

// 大文件上传列表
const needUpload = ref(false)
const largeDefaultFileList = ref<CustomFile[]>([])
const largeFileList = ref<CustomFile[]>([])
const handleUpdateLargeFileList = (e: CustomFile[]) => {
  fileList.value = e
  const list = fileList.value
  formValue.fileId = (list && list.length > 0) ? "1" : null
  formRef.value?.validate()
  
}
// const handleUpdateLargeFileList = (e: CustomFile[]) => {
//   console.log(e, largeDefaultFileList.value)
//   largeFileList.value = e
//   // @ts-ignore
//   formValue.fileId = largeDefaultFileList.value
//     .concat(e)
//     // @ts-ignore
//     .map((c) => c.file?.remoteId)
//     .join(',')
//   formRef.value?.validate()
// }

// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  tags.splice(index, 1)
  if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}

// 确定
const loading = ref(false)
const formRef = ref<FormInst | null>(null)
const modalVisible = ref(false)
const contentContent = ref()
const confirm = (status: any) => {
  formValue.draft = status
  formRef.value?.validate(async (err) => {
    if (err) return
    contentContent.value = status ? '您确定要保存草稿吗？' : ' 您确定要提交申请吗？'
    modalVisible.value = true
  })
}

const againConfirm = async () => {
  loading.value = true
  const fileIds = fileList.value.map((c) => c.file?.remoteId).join(',')
  formValue.primitiveId = formValue.primitiveId?.join() || null
  if (props.id && !props.flag) {
    const [error, res] = await sendRequest({
      module: 'seal',
      api: 'sealApplicationUpdate',
      override: {
        data: {
          ...formValue,
          fileId: fileIds,
          chapterCategoryCode: functionCode.value,
          id: props?.id
        }
      }
    })
    if (error) return message.error(error.message)
    message.success(res.msg)
    goSubmit()
  } else {
    const [error, res] = await sendRequest({
      module: 'seal',
      api: 'sealApplicationSave',
      override: {
        data: {
          ...formValue,
          fileId: fileIds,
          chapterCategoryCode: functionCode.value
        }
      }
    })
    if (error) return message.error(error.message)
    message.success(res.msg)
    goSubmit()
  }
  loading.value = false
  modalVisible.value = false
}

//提交完跳转我的提交
const goSubmit = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  tags.splice(index, 1)
  if (formValue.draft) return router.push({ path: '/OA/UserCenter/Drafts' })
  router.push({ path: '/OA/UserCenter/Submit' })
}

const isEdit = ref(false)
watch(
  () => props.id,
  () => {
    if (props.title == '编辑用章申请' && props.id) {
      isEdit.value = true
      getInfo()
    }
  },
  { deep: true, immediate: true }
)
onMounted(() => {
  getWorkFlow()
})
</script>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 16rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.commonWidth {
  width: 240rem;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .topTitle {
    width: 100%;
    border-bottom: 1px solid #fff;
    padding: 15rem 20rem;
    margin-bottom: 20rem;
    @include CommonFont;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 0 20rem 0rem;

    .content {
      display: flex;
      flex-wrap: wrap;
      padding: 20rem 0 180rem;
      background-color: #ebeceb;

      .scope {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .userBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 40rem;
          background-color: #fff;
          border-radius: 4rem;
          padding: 5px 10rem;
          margin-bottom: 10rem;
        }
      }
    }
  }
}

.content_cen {
  display: flex;
  flex-direction: column;
  margin-left: 35%;
}

.iconStyle {
  margin-right: 5rem;
  color: #5fb17f;
}

.progress {
  display: flex;
  align-items: center;
  min-width: 360rem;
  max-width: 800rem;
  min-height: 50rem;
  background-color: #d5e2d8;
  border-radius: 5rem;
  margin-bottom: 10px;
  padding: 5px 25px;
  margin-left: 35%;
}

.progressHint {
  display: flex;
  min-width: 360rem;
  max-width: 800rem;
  padding: 5px 25px;
  margin-left: 35%;
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
